<template>
  <div class="echarts">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="margin-bottom: 20px">
        <AppCard title="我是饼图" class="pie">
          <template #default>
            <PieComponent />
          </template>
        </AppCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="margin-bottom: 20px">
        <AppCard title="屏幕滚动" class="pie">
          <template #default>
            <ScrollVue />
          </template>
        </AppCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="margin-bottom: 20px">
        <AppCard title="我是饼图" class="pie">
          <template #default>
            <WordChartVue />
          </template>
        </AppCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="margin-bottom: 20px">
        <AppCard title="我是饼图" class="pie">
          <template #default>
            <BarEchart />
          </template>
        </AppCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="margin-bottom: 20px">
        <AppCard title="我是饼图22" class="pie">
          <template #default>
            <LineEchart />
          </template>
        </AppCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="margin-bottom: 20px">
        <AppCard title="我是饼图" class="pie">
          <template #default>
            <LiquidEchart />
          </template>
        </AppCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import AppCard from '@/components/AppCard/index.vue'
import ScrollVue from './components/scrollVue.vue'
import PieComponent from './components/pieComponent.vue'
import BarEchart from './components/barEchart.vue'
import WordChartVue from './components/wordChart.vue'
import LiquidEchart from './components/liquidEchart.vue'
import LineEchart from './components/lineEchart.vue'
// import type { EChartsOption } from 'echarts'
</script>

<style scoped lang="scss">
.echarts {
  padding: 20px;
  height: 100%;
  background: url('@/assets/img/newBg.jpg') no-repeat;
  background-size: 100% 100%;
  // background-color: red;
  box-sizing: border-box;
  overflow-x: hidden;
}
</style>
